<template>
	<view class="select-bottom">
		<view class="select-wrap">
			<my-select ref="year" :options="year" mykey="class_id" text="class_name" @change="yearTap($event)" @open="openyear()"></my-select>
		</view>
		<view class="select-wrap" v-if="showMonth">
			<my-select ref="month" :options="month" mykey="class_id" text="class_name" @change="monthTap($event)" @open="openmonth()"></my-select>
		</view>
	</view>
</template>

<script>
	import mySelect from "../select/select.vue"
	export default {
		props:{
			showMonth: {
				type: Boolean,
				value: true
			}
		},
		data() {
			return {
				searchValue:{
					year:{id:2020},
					month:{id:0}
				},
				year: [{
				  class_id: '2020',
				  class_name: '2020'
				}],
				month: [{
				  class_id: '0',
				  class_name: '全部'
				},{ 
				  class_id: '01', 
				  class_name: '01' 
				},{ 
				  class_id: '02', 
				  class_name: '02' 
				},{ 
				  class_id: '03', 
				  class_name: '03' 
				},{ 
				  class_id: '04', 
				  class_name: '04' 
				},{ 
				  class_id: '05', 
				  class_name: '05' 
				},{ 
				  class_id: '06', 
				  class_name: '06' 
				},{ 
				  class_id: '07', 
				  class_name: '07' 
				},{ 
				  class_id: '08', 
				  class_name: '08' 
				},{ 
				  class_id: '09', 
				  class_name: '09' 
				},{ 
				  class_id: '10', 
				  class_name: '10' 
				},{ 
				  class_id: '11', 
				  class_name: '11' 
				},{ 
				  class_id: '12', 
				  class_name: '12' 
				}]
			};
		},
		components:{
			mySelect
		},
		methods:{
			yearTap(item){
				console.log(item)
				this.searchValue.year = item
				this.change()
			},
			monthTap(item){
				console.log(item)
				this.searchValue.month = item
				this.change()
			},
			change(){
				if(this.searchValue.year && (this.showMonth ? this.searchValue.month : true)){
					if(this.showMonth){
						console.log(this.searchValue)
						let {year:{id:year},month:{id:month}} = this.searchValue
						this.$emit("change", {year,month})
					}else{
						console.log(this.searchValue)
						let {year:{id:year}} = this.searchValue
						this.$emit("change", {year})			
					}
				}
			},
			close(){
				this.$refs.year.close()
				if(this.showMonth)
					this.$refs.month.close()
			},
			
			openyear(){
				if(this.showMonth)
					this.$refs.month.close()
				this.$emit("open")
			},
			openmonth(){
				this.$refs.year.close()
				this.$emit("open")
			}
		}
	}
</script>

<style lang="scss">
	.select-bottom{
	  display: flex;
	  justify-content: flex-end
	}
	.select-wrap {
	  width: 186rpx;
	  height: 72rpx;
	}
	.select-wrap:nth-child(n+2){
	  margin-left: 10rpx;
	}
</style>
